<template>
	<view class="page">
		<view class="main">
			<view class="count_top">
				<view class="count_title">
					<text class="count_text">账户余额</text>
					<text class="count_detail" @click="detail()">明细</text>
				</view>
				<view class="count_num">
					<text class="icon">￥</text>
					<text class="num">{{money}}</text>
				</view>
			</view>
			<view class="count_center" v-if="amountList.length>0">
				<view class="count_title"><text class="count_text">储值金额</text></view>
				<view class="amount_list">
					<view @tap="bindNav(index)" v-for="(item, index) in amountList" :key="index" class="amount_item" :class="bindIndex == index && 'active'">{{ item.recharge_money }}元</view>
				</view>
				<view class="cmount_tips" :class="bindIndex == -1 && 'v-h'">*充值{{ amountList[bindIndex].recharge_money }}元赠送{{ amountList[bindIndex].give_money }}元</view>
			</view>
			<view class="count_bottom">
				<view class="count_title"><text class="count_text">充值提醒</text></view>
				<view class="tips_list">
					<view class="tips_rule" v-for="(itemy, indey) in tipsList" :key="indey">
						<text>
							{{ indey + 1 }}.{{ itemy }}
							<block>{{ indey + 1 != tipsList.length ? '；' : '' }}</block>
						</text>
					</view>
				</view>
			</view>
		</view>
		<view class="btn_view oh" v-if="amountList.length>0"><view class="btn" :class="bindIndex != -1 && 'active'" @tap="bindBtn">充值金额</view></view>
	</view>
</template>

<script>
import { commonMixinFun } from '@/static/mixins/common.js';
import API from '@/static/api/index.js';
import uniPay from '@/static/uitls/uniPay.js';
const app = getApp();
export default {
  mixins: [commonMixinFun],
	data() {
		return {
			bindIndex:0,
			money:'',
			amountList: [
				// { money: 100, send: 10 },
				// { money: 200, send: 20 },
				// { money: 500, send: 50 },
				// { money: 1000, send: 100 },
				// { money: 1500, send: 150 },
				// { money: 2000, send: 200 }
			],
			tipsList: [
				'储值成功后，余额不可提现、退款或转增他人，请根据自己的消费情况进行充值',
				'账户充值仅限微信在线方式支付，充值金额实时到账',
				'账户余额有效期：自充值日起用完即止',
				'若有其他疑问，可拨打15036338427'
			]
		};
	},
	onLoad(option){
		this.needReturn = option.hasOwnProperty('needReturn')//充值完成后是否需要提示返回当前页面
		this._recharge()
	},
	methods:{
		//查看充值明细
		detail(){
			this.pageTo('/pages/my_account_detail/index')
		},
		_recharge(){
			API.recharge().then(res=>{
				if(res.code==1){
					app._log(res.data.money)
					this.money=res.data.money//总金额
					for (var i = 0; i < res.data.recharges.length; i++) {
						res.data.recharges[i].give_money=parseFloat(res.data.recharges[i].give_money)
						res.data.recharges[i].recharge_money=parseFloat(res.data.recharges[i].recharge_money)
					}
					this.amountList=res.data.recharges//套餐列表
				}
			})
		},
		bindNav(index){
			this.bindIndex = this.bindIndex==index?-1:index;
		},
		bindBtn(){
			let {bindIndex,amountList}=this
			if(bindIndex==-1){
				this.showToast('请选择充值金额')
			}else{
				API.rechargePay({recharge_id:amountList[bindIndex].recharge_id}).then(res=>{
					if(res.code==1){
						uniPay(res.data).then(resx=>{
							this._notify(res.data.out_trade_no)
						})
					}else{
						this.showToast(res.msg);
					}
				})
			}
		},
		_notify(out_trade_no){
			API.notify({order_no:out_trade_no}).then(res=>{
				if(res.code==1){
					if(this.needReturn){ //需要提示返回上一页
						uni.showModal({
							title:'充值成功',
							content:'是否返回上一页继续操作？',
							success:res=>{
								if(res.confirm){
									uni.navigateBack({delta:1})
								}
							}
						})
					}else{
						this.showToast('充值成功','success');
					}
					setTimeout(()=>{
						this._recharge()
					},2000)
				}else{
					this.showToast(res.msg);
				}
			})
		}
	}
};
</script>

<style lang="scss">
.page {
	padding: 24rpx 48rpx 0;
}
.main {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 24rpx 24rpx 50rpx;
	margin-bottom:calc(176rpx + constant(safe-area-inset-bottom));
	margin-bottom:calc(176rpx + env(safe-area-inset-bottom));
}
.count_ {
	&text {
		font-size: 28rpx;
		line-height: 40rpx;
		color: #1f2633;
	}
	&top {
		.count_title {
			display: flex;
			justify-content: space-between;
			margin-bottom: 86rpx;
			.count_detail {
				font-size: 28rpx;
				line-height: 40rpx;
				color: #8f8f9a;
			}
		}
		.count_num {
			// display: inline-block;
			text-align: center;
			height: 96rpx;
			.icon {
				vertical-align: text-top;
			}
			.num {
				vertical-align: text-top;
				font-size: 72rpx;
			}
			margin-bottom: 72rpx;
		}
		border-bottom: 2rpx solid rgba(204, 204, 204, 0.5);
	}
	&center {
		margin-top: 64rpx;
		.amount_list {
			display: flex;
			flex-wrap: wrap;
			.amount_item {
				width: 186rpx;
				line-height: 136rpx;
				background-color: #f5f5f5;
				border-radius: 16rpx;
				text-align: center;
				margin-top: 24rpx;
				&:not(:nth-child(3n)) {
					margin-right: 24rpx;
				}
				&.active {
					color: #fff;
					background-image: linear-gradient(313deg, #7f4aff 0%, #9254ff 100%);
				}
			}
		}
		.cmount_tips {
			padding: 16rpx 0 32rpx;
			height: 68rpx;
			font-size: 24rpx;
			line-height: 34rpx;
			color: #7f4aff;
		}
	}
	&bottom {
		.tips_list {
			color: #8f8f9a;
			font-size: 24rpx;
			margin-top: 24px;
			.tips_rule {
				line-height: 34rpx;
				&:not(:last-child) {
					margin-bottom: 12rpx;
				}
			}
		}
	}
}
.btn_view {
	position: fixed;
	left: 0rpx;
	bottom: 0;
	padding-top:12rpx;
	padding-bottom: calc(12rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
	width: 750rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ffffff;
	box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(237, 237, 237, 0.5);
	.btn {
		width: 654rpx;
		line-height: 92rpx;
		text-align: center;
		border-radius: 24rpx;
		&.active {
			color: #ffffff;
			background-image: linear-gradient(270deg, #7f4aff 0%, #9254ff 100%);
		}
		&:not(.active) {
			color: #d1d2db;
			background-color: #f0f0f6;
		}
	}
}
</style>
